import React from 'react';
import { Layout, Menu, Dropdown, Avatar, Button } from 'antd';
import { UserOutlined, DownOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';

const { Header: AntHeader } = Layout;

function Header({ user, onLogout, collapsed, onToggleCollapse }) {
  if (!user) return null;

  const userMenu = (
    <Menu>
      <Menu.Item key="profile">个人资料</Menu.Item>
      <Menu.Item key="settings">设置</Menu.Item>
      <Menu.Divider />
      <Menu.Item key="logout" onClick={onLogout}>
        退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <AntHeader className="site-layout-background" style={{ padding: 0, background: '#fff' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={onToggleCollapse}
            style={{ fontSize: '16px', width: 64, height: 64 }}
          />
          <div style={{ fontSize: '16px', fontWeight: 'bold', color: '#1890ff' }}>
            后台管理系统
          </div>
        </div>
        <div style={{ padding: '0 24px' }}>
          <Dropdown overlay={userMenu} trigger={['click']}>
            <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
              <Avatar icon={<UserOutlined />} style={{ marginRight: 8 }} />
              欢迎，{user.username} <DownOutlined />
            </a>
          </Dropdown>
        </div>
      </div>
    </AntHeader>
  );
}

export default Header;